// 类组件-类名、文件名、组件名保持一致，首字母大写
// 类组件的功能完善，可以有生命周期、数据状态、this，函数式组件没有这些。
// 函数式组件适用于简单的页面展示，没有逻辑，没有数据状态。性能好
// 类组件适用于复杂功能
// 在类组件中，一共有两个对象存放数据：state、props
// state是自己的数据，修改时调用setState
// props中包含有父组件穿的值，是只读的，不能修改；只能通过父组件主动修改
import { Component } from "react";// Component是react中的父类，Com2是子类
import ComSon from "./ComSon";
// 导入路由组件
import {NavLink} from 'react-router-dom'
class Com2 extends Component {
    // constructor 初始化,第一个生命周期
    constructor() {
        console.log(1);
        // super 调用super之后才可以使用this
        super();
        // state 状态机，类似vue中的data，用来初始化数据，存放数据
        this.state = {
            name: 'Mabaoguo',
            age: 70,
            person: {
                name: 'Tony'
            }
        }
    }
    puTong(val) {
        console.log(val);
        console.log(this);
    }
    changeAge(e, val) {
        console.log(e);
        console.log(val);
        // react没有实现双向绑定，数据的变化不会驱动页面更新。小程序也是
        this.setState({ // setState 是react中用来修改数据的方式，是一个异步函数
            // setState在修改数据之后 会调用redner方法，以更新页面，所以操作dom，所以异步
            age: this.state.age + 1
        }, () => {
            // setState接受回调函数作为第二个参数，此时可以拿到最新数据
            console.log('cb', this.state.age);
        })
        console.log(this.state.age);// 因为setState是异步，所以这个代码先执行
    }
    // 这个函数的作用就是从父传给子，去运输数据
    postData(val) {
        console.log(val);
    }
    // 根据Props获取派生的state---根据props修改state
    static getDerivedStateFromProps() {
        console.log(2);
        return null // 这个返回值就是后面要用的state，如果不需要修改就返回null
    }
    componentDidMount() {
        // 此时发请求
        console.log('4-页面已经渲染成功');
    }
    shouldComponentUpdate() {
        console.log('5-组件是否更新？');
        // 性能优化，根据实际情况返回t、f true就更新页面 否则就不更新
        return true
    }
    componentDidUpdate() {
        console.log('6-组件已经更新');
    }
    componentWillUnmount() {
        console.log('7-组件将要被销毁，此时可以清楚定时器、全局变量、手动添加的事件监听');
    }
    render() {
        console.log(3);
        return (
            <div>
                {/* 这是父传子，第一步在父组件中给子组件添加属性；第二步在子组件中通过this.props接受 */}
                {/* 子传父，先父传子一个函数，在子组件调用函数时传参，父组件就收到数据了 */}
                <ComSon age={this.state.age} post={this.postData}></ComSon>
                <mark>我是第一个react的类组件，我傲娇！</mark>
                <p>名字-{this.state.name}</p>
                <p>年龄-{this.state.age}</p>
                <p>理发师：{this.state.person.name}</p>
                <button onClick={(e) => this.changeAge(e, this.state.name)}>按时长大</button>
                <br></br>
                <button onClick={this.puTong.bind(this, 'aaa')}>ES5</button>
                <br></br>
                <NavLink to="/com1">com1</NavLink>
                <NavLink to="/hello">hello</NavLink>
            </div>
        )
    }
}

export default Com2